<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    :title="
      !modelValue.form.id
        ? `新增${modelValue.title}`
        : `修改${modelValue.title}`
    "
    width="1000px"
  >
    <el-form
      ref="addEditRef"
      :model="modelValue.form"
      label-width="130px"
      label-position="right"
      :rules="modelValue.rules"
    >
      <!-- 规则编码 -->
      <el-form-item label="规则编码" prop="number">
        <el-input
          v-model="modelValue.form.number"
          maxlength="64"
          placeholder="请输入规则编码"
          show-word-limit
        />
      </el-form-item>

      <!-- 规则名称 -->
      <el-form-item label="规则名称" prop="name">
        <el-input
          v-model="modelValue.form.name"
          placeholder="请输入清洗规则名称"
          maxlength="64"
          show-word-limit
        />
        <span class="example-text">例如：设置清洗模板为日清、周清、月清</span>
      </el-form-item>
      <!-- 步骤区域 -->
      <div class="tab-field">
        <el-button @click="addStep" class="tab-new-btn">+ 新增步骤</el-button>
        <el-tabs v-model="modelValue.form.activeName" type="border-card">
          <el-tab-pane
            v-for="item in modelValue.form.restRuleDetails"
            :key="item.title"
            :label="item.title"
            :name="item.name"
            :closable="true"
          >
            <div class="step-content">
              <!-- 清洗方式 -->
              <el-form-item label="清洗方式">
                <el-radio-group v-model="item.cleanWay">
                  <el-radio label="0">冲洗</el-radio>
                  <el-radio label="1">浸泡</el-radio>
                </el-radio-group>
              </el-form-item>

              <!-- 用水类型 -->
              <el-form-item label="选择用水类型">
                <el-radio-group v-model="item.waterUsageType">
                  <el-radio-button label="1">纯净水</el-radio-button>
                  <el-radio-button label="2">消毒水</el-radio-button>
                  <el-radio-button label="3">除垢剂</el-radio-button>
                  <el-radio-button label="4">空气</el-radio-button>
                </el-radio-group>
              </el-form-item>

              <el-form-item v-if="item.cleanWay == 0" label="清洗时长">
                <el-input-number
                  style="margin-right: 12px"
                  v-model="item.cleanTime"
                  :min="0"
                >
                </el-input-number>
                <el-button
                  v-for="subItem in washOptions"
                  :key="subItem.value"
                  :label="subItem.label"
                  :value="subItem.value"
                  style="width: 70px"
                  @click="item.cleanTime = subItem.value"
                  >{{ subItem.name }}</el-button
                >
              </el-form-item>

              <!-- 时间设置 -->
              <el-form-item v-if="item.cleanWay == 1" label="浸泡时间">
                <el-input-number v-model="item.soakTime" :min="0">
                </el-input-number>
                <span style="margin: 0 12px">分钟 设备每隔</span>
                <el-input-number v-model="item.intervalTime"> </el-input-number>
                <span style="margin: 0 12px">分钟 冲洗</span>
                <el-input-number v-model="item.rinseTime" :min="0">
                </el-input-number>
                <span style="margin-left: 12px">秒</span>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ensure"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {
  addFdsCleaningRuleset,
  updateFdsCleaningRuleset,
} from '@/api/fds-cleaning-ruleset.api'

const props = defineProps(['modelValue'])
const addEditRef = ref(null)
const dialogVisible = ref(false)

const washOptions = [
  {
    value: 3,
    name: '3s',
  },
  {
    value: 10,
    name: '10s',
  },
  {
    value: 20,
    name: '20s',
  },
  {
    value: 30,
    name: '30s',
  },
  {
    value: 40,
    name: '40s',
  },
  {
    value: 50,
    name: '50s',
  },
  {
    value: 80,
    name: '80s',
  },
]

const addStep = () => {
  let list = props.modelValue.form.restRuleDetails
  list.push({
    title: `步骤${list.length + 1}`,
    name: `步骤${list + 1}`,
    cleanWay: '0',
    waterUsageType: '1',
    //清洗时长
    cleanTime: 1,
    soakTime: 1,
    intervalTime: 1,
    rinseTime: 1,
  })
}

const ensure = () => {
  let form = props.modelValue.form

  let children = form.restRuleDetails || []
  let formData = {
    number: form.number,
    name: form.name,
    enabled: form.enabled,
    children: JSON.stringify(children),
    // cleanTime: form.cleanTime,
    // soakTime: form.soakTime,
    // intervalTime: form.intervalTime,
    // rinseTime: form.rinseTime,
    // remark: form.remark,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateFdsCleaningRuleset({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addFdsCleaningRuleset(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

const cancel = () => {
  props.modelValue.visible = false
}

// 打开对话框
const openDialog = () => {
  dialogVisible.value = true
}

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
}

// 表单数据
const formData = reactive({
  ruleCode: 'C0020',
  ruleName: '',
  remindBefore: false,
  emptyWarewash: true,
  scrappedMaterial: false,
  batchWash: false,
  unwashedMaterials: [],
  washMethod: 'soak',
  waterTypes: ['pureWater', 'disinfectant'],
  soakTime: 1,
  intervalTime: 1,
  rinseTime: 1,
  alertTitle: '',
  alertContent: '',
  needConfirm: false,
})

// 物料选项
const materialOptions = [
  { value: 'material1', label: '物料1' },
  { value: 'material2', label: '物料2' },
  { value: 'material3', label: '物料3' },
  { value: 'material4', label: '物料4' },
]

// 表单验证规则
const rules = reactive({
  ruleCode: [
    { required: true, message: '请输入规则编码', trigger: 'blur' },
    { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' },
  ],
  ruleName: [
    { required: true, message: '请输入规则名称', trigger: 'blur' },
    { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' },
  ],
  alertTitle: [
    { required: true, message: '请输入清洗提示标题', trigger: 'blur' },
    { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' },
  ],
  alertContent: [
    { required: true, message: '请输入清洗提示内容', trigger: 'blur' },
    { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' },
  ],
})

// 暴露方法给父组件使用
defineExpose({
  openDialog,
  closeDialog,
})
</script>

<style scoped>
.input-suffix {
  color: #ccc;
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.example-text {
  color: #ee9e24;
  font-size: 12px;
}

.switch-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.switch-group :deep(.el-form-item) {
  width: 50%;
  margin-bottom: 0 !important;
}

.switch-desc {
  color: #f59a23;
  font-size: 12px;
  line-height: 1.4;
  margin-left: 12px;
}

.multi-select :deep(.el-select__tags) {
  max-height: 80px;
  overflow-y: auto;
}

.select-tip {
  color: #999;
  font-size: 12px;
  margin-top: 4px;
  color: #f59a23;
}

.step-container {
  margin-top: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

.add-step {
  color: #f59a23;
  cursor: pointer;
}

.step-content {
  padding: 20px;
}

.method-group {
  margin-bottom: 20px;
}

.method-label {
  margin-bottom: 12px;
  font-weight: 500;
  color: #606266;
}

.time-settings {
  margin-bottom: 20px;
}

.time-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.time-item span {
  margin-right: 8px;
}

.time-item :deep(.el-input-number) {
  width: 100px;
  margin-right: 8px;
}

.time-item :deep(.el-input-number .el-input__inner) {
  text-align: center;
}

.tab-field {
  position: relative;
}

.tab-field .tab-new-btn {
  position: absolute;
  right: 12px;
  top: 5px;
  z-index: 1000;
}

/* :deep(.active) {
  color: #f59a23;
}

:deep(.el-tabs__new-tab) {
  background-color: #f3960b;
  color: #fff;
  width: 36px;
  height: 26px;
  font-size: 16px;
  margin-right: 12px;
  border: none;
} */
</style>
